<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="挂号单ID" prop="gh_id">
        <el-input
          v-model="queryParams.gh_id"
          placeholder="请输入挂号单号码"
          clearable
          size="small"
          style="width: 300px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" size="mini" >读取IC卡</el-button>
    </el-form>
<!--患者信息-->
    <el-card class="box-card" :class="{'colordisplay':display}" >
      <div  class="text item">
        <table>
          <tr>
            <td class="le_td">挂号单号:</td>
            <td class="ri_td">{{huanzhe.reg_id}}</td>
            <td class="le_td">医生姓名:</td>
            <td class="ri_td">{{huanzhe.reg_docter}}</td>
          </tr>
          <tr>
            <td>科室名称:</td>
            <td>{{huanzhe.reg_depts}}</td>
            <td>患者姓名:</td>
            <td>{{huanzhe.pati_name}}</td>
          </tr>
          <tr>
            <td>就诊时间:</td>
            <td>{{huanzhe.reg_sdate}}</td>
            <td>主诉:</td>
            <td>{{huanzhe.symptom}}</td>
          </tr>
          <tr>
            <td>诊断信息:</td>
            <td>{{huanzhe.zhen_message}}</td>
            <td>医生建议:</td>
            <td>{{huanzhe.doctor_advise}}</td>
          </tr>
        </table>
      </div>
    </el-card>
<!--四个按钮-->
    <el-card class="box-card" :class="{'colordisplay':display}" >
      <el-row>
        <el-button type="success">全选</el-button>
        <el-button type="primary">取消全选</el-button>
        <el-button type="danger"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['sfgl_lgl:recipe:pay']">现金</el-button>
        <el-button type="danger"
                   :disabled="multiple"
                   @click="handleDelete"
                   v-hasPermi="['sfgl_lgl:recipe:pay']">支付宝</el-button>
        <span class="sum_money">订单总额:<span class="font_red">￥{{ sum_money }}</span></span>
      </el-row>
    </el-card>
<!--折叠面板  -->
      <el-collapse :class="{'colordisplay':display}" v-model="activeNames">
<!--  检查处方      "[检查处方] [1] [处方总额]   ￥"-->
        <el-collapse-item :title="check_name" name="1">
          <el-table v-loading="" :data="check_list" @selection-change="handleSelectionChange1">
            <el-table-column type="selection" width="55" align="center" :selectable="checkSelect"/>
            <el-table-column label="编号" align="center" prop="id" />
            <el-table-column label="项目名称" align="center" prop="systemProjectFee.project_name" />
            <el-table-column label="单位" align="center" prop="systemProjectFee.project_times" />
            <el-table-column label="单价(元)" align="center" prop="systemProjectFee.project_unitprice" />
            <el-table-column label="金额" align="center" prop="systemProjectFee.project_unitprice" />
            <el-table-column label="检查备注" align="center" prop="check_remark" width="180"></el-table-column>
            <el-table-column label="支付状态" align="center" prop="otc_status" width="180" :formatter="statusFormat" ></el-table-column>

          </el-table>
        </el-collapse-item>
<!--   药品处方     -->
        <el-collapse-item :title="medica_name" name="2">
          <el-table v-loading="" :data="medica_list" @selection-change="handleSelectionChange2" >
            <el-table-column type="selection" width="55" align="center" :selectable="checkSelect"/>
            <el-table-column label="编号" align="center" prop="id" />
            <el-table-column label="药品名称" align="center" prop="drugsDurg.drug_name" />
            <el-table-column label="数量" align="center" prop="quantity" />
            <el-table-column label="单价(元)" align="center" prop="drugsDurg.drug_otc_price" />
            <el-table-column label="金额(元)" align="center" prop="amount_of_money" />
            <el-table-column label="服用备注" align="center" prop="remark" width="180"></el-table-column>
            <el-table-column label="支付状态" align="center" prop="otc_status" width="180" :formatter="statusFormat" ></el-table-column>

          </el-table>
        </el-collapse-item>
      </el-collapse>

    <!-- 添加付款对话框 -->
<!--    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <table>
        <tr>
          <td class="le_td">订单号:</td>
          <td class="ri_td"></td>
          <td class="le_td">总金额:</td>
          <td class="ri_td"></td>
        </tr>
        <tr>
          <td colspan="4">
            <h1>一个二维码</h1>
          </td>

        </tr>
      </table>
    </el-dialog>-->
  </div>



</template>

<script>
import { listPost,PayPost } from "@/api/sfgl_lgl/chuFang";

export default {
  name: "index",

  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        //挂号单ID
        gh_id: undefined
      },
      // 显示搜索条件
      showSearch: true,

      // 检查处方信息
      check_list:[ ],
      // 患者信息
      huanzhe: {
        reg_id:undefined,//挂号单号
        reg_docter:undefined,//医生姓名
        reg_depts:undefined,//科室名称
        pati_name:undefined,//患者姓名
        reg_sdate:undefined,//就诊时间
        symptom:undefined,//主诉
        zhen_message:undefined,//诊断信息
        doctor_advise:undefined,//医生建议
      },
      //用药处方信息
      medica_list:[],
      //决定各框是否展示
      display: true,

      activeNames: ['1'],
      // 状态数据字典
      statusOptions: [],

      check_money:0,
      medica_money:0,
      sum_money:0,
      check_name:"【检查处方】【1】【处方总额】￥",
      medica_name:"【药品处方】【2】【处方总额】￥",
      // 选中数组
      check_ids: [],
      check_moneys:[],
      medica_ids:[],
      medica_moneys:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,

      /*queryParams: {
        //挂号单ID
        gh_id: undefined
      },*/

    }

  },
  mounted:function(){
    this.check_name =this.check_name+this.check_money;
    this.medica_name = this.medica_name+this.medica_money;
  },
  methods: {
    /** 查询就诊信息 */
    getList() {
      listPost(this.queryParams).then(response => {
        // console.log(response);
        this.check_list = response.data.check;
        this.huanzhe = response.data.huanzhe;
        this.medica_list = response.data.medica;
        this.display = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    // 支付状态字典翻译
    statusFormat(row) {
      if (row.otc_status == 1) {
        return "未支付";
      } else if (row.otc_status == 2) {
        return "已退费";
      } else {
        return "支付成功";
      }
    },

    /** 付钱按钮操作 */
    handleDelete(row) {
      /* this.open = true;
      this.title = "";*/
      //请求参数
      const payParams = {
        gh_id: this.queryParams.gh_id,
        check_ids: this.check_ids.toString(),
        medica_ids: this.medica_ids.toString(),
        sum_money: this.sum_money,
      }

      this.$confirm('是否确认付款,总金额:' + payParams.sum_money + '', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(function () {
        //console.log(payParams);
        return PayPost(payParams);
      }).then(() => {

        this.display = true;
        this.msgSuccess("付款成功");
      })

      /*const postIds = row.id || this.ids;
      this.$confirm('是否确认删除处方编号为"' + postIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delPost(postIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })*/
    },
    // 检查处方多选框选中数据
    handleSelectionChange1(selection) {
      this.sum_money = 0;
      //初始检查处方金额、检查处方名称
      this.check_money = 0;
      this.check_name = "【检查处方】【1】【处方总额】￥";

      this.check_ids = selection.map(item => item.id)
      this.check_moneys = selection.map(item => item.systemProjectFee.project_unitprice)

      for (var i = 0; i < this.check_moneys.length; i++) {
        this.check_money += this.check_moneys[i];
      }
      this.check_name += Number(this.check_money);
      this.single = selection.length != 1
      // this.single = this.medica_moneys.length+this.check_moneys!=1
      this.multiple = !(this.medica_moneys.length + this.check_moneys.length)
      /* console.log("single:"+this.single)
      console.log("multiple:"+this.multiple)*/
      this.sum_money = this.medica_money + this.check_money;
    },
    //药品处方选中数据
    handleSelectionChange2(selection) {
      this.sum_money = 0;
      //初始药品处方金额、药品处方名称
      this.medica_money = 0;
      this.medica_name = "【药品处方】【2】【处方总额】￥";

      this.medica_ids = selection.map(item => item.id)
      this.medica_moneys = selection.map(item => item.amount_of_money)

      for (var i = 0; i < this.medica_moneys.length; i++) {
        this.medica_money += this.medica_moneys[i];
      }
      this.medica_name += Number(this.medica_money);
      //  this.single = this.medica_moneys.length+this.check_moneys!=1
      this.multiple = !(this.medica_moneys.length + this.check_moneys.length)

      this.sum_money = this.medica_money + this.check_money;
    },
    //检查行是否可选
    checkSelect(row,index) {
      let isChecked = false;
      console.log(row.otc_status);
      if (row.otc_status ==1) { // 判断里面是否存在某个参数
        isChecked = true
      } else {
        isChecked = false
      }
      return isChecked
    }
  }
}
</script>

<style scoped>
.colordisplay{
  display: none;
}
.box-card {
  width: 1300px;
}
/*第一个卡片*/
tr{
  hight:20px;
  line-height: 20px;
}
.le_td{
  width:150px;
}
.ri_td{
  width:500px;
}
.text {
  font-size: 14px;
}

/*.item {
  padding: 18px 0;
}*/
/*订单总额*/
.sum_money{
  margin-left: 100px;
}
.font_red{
  color:red;
  font-size:20px;
}

</style>
